<template>
  <div class="" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <br>
    <div>
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
            <div>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="待接订单" name="first">
                  <HallfoodSearch></HallfoodSearch>
                  <div>
                    <table class="table table-striped table-hover mt-5">
                      <thead>
                      <tr>
                        <th>订单号</th>
                        <th>桌位ID</th>
                        <th>用餐人数/桌位费</th>
                        <th>下单时间</th>
                        <th>应付金额</th>
                        <th>支付状态</th>
                        <!--                          <th>订单状态</th>-->
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="(item, index) in NotReceivedOrderList.list" v-bind:key="index">
                        <td>{{ item.orderNo }}</td>
                        <td>{{ item.seatId }}</td>
                        <td>{{ item.customerTotal }}/￥{{ item.customerTotal*2 }}</td>
                        <td>{{ item.createTime | dateFormat }}</td>
                        <td>{{ item.totalPrice }}</td>
                        <td>{{ item.payStatus }}</td>
                        <!--                          <td>{{ 7 }}</td>-->
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="已接订单" name="second">
                  <HallfoodSearch></HallfoodSearch>
                  <div>
                    <table class="table table-striped table-hover mt-5">
                      <thead>
                      <tr>
                        <th>订单号</th>
                        <th>桌位ID</th>
                        <th>用餐人数/桌位费</th>
                        <th>下单时间</th>
                        <th>应付金额</th>
                        <th>支付状态</th>
                        <!--                          <th>订单状态</th>-->
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="(item, index) in ReceivedOrderList.list" v-bind:key="index">
                        <td>{{ item.orderNo }}</td>
                        <td>{{ item.seatId }}</td>
                        <td>{{ item.customerTotal }}/￥{{ item.customerTotal*2 }}</td>
                        <td>{{ item.createTime | dateFormat }}</td>
                        <td>{{ item.totalPrice }}</td>
                        <td>{{ item.payStatus }}</td>
                        <!--                          <td>{{ 7 }}</td>-->
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="未完成订单" name="third">
                  <HallfoodSearch></HallfoodSearch>
                  <div>
                    <table class="table table-striped table-hover mt-5">
                      <thead>
                      <tr>
                        <th>订单号</th>
                        <th>桌位ID</th>
                        <th>用餐人数/桌位费</th>
                        <th>下单时间</th>
                        <th>应付金额</th>
                        <th>支付状态</th>
                        <!--                          <th>订单状态</th>-->
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="(item, index) in UncompletedOrderList.list" v-bind:key="index">
                        <td>{{ item.orderNo }}</td>
                        <td>{{ item.seatId }}</td>
                        <td>{{ item.customerTotal }}/￥{{ item.customerTotal*2 }}</td>
                        <td>{{ item.createTime | dateFormat }}</td>
                        <td>{{ item.totalPrice }}</td>
                        <td>{{ item.payStatus }}</td>
                        <!--                          <td>{{ 7 }}</td>-->
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="已完成订单" name="fourth">
                  <HallfoodSearch></HallfoodSearch>
                  <div>
                    <table class="table table-striped table-hover mt-5">
                      <thead>
                      <tr>
                        <th>订单号</th>
                        <th>桌位ID</th>
                        <th>用餐人数/桌位费</th>
                        <th>下单时间</th>
                        <th>应付金额</th>
                        <th>支付状态</th>
                        <!--                        <th>订单状态</th>-->
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="(item, index) in FinishedOrderList.list" v-bind:key="index">
                        <td>{{ item.orderNo }}</td>
                        <td>{{ item.seatId }}</td>
                        <td>{{ item.customerTotal }}/￥{{ item.customerTotal*2 }}</td>
                        <td>{{ item.createTime | dateFormat }}</td>
                        <td>{{ item.totalPrice }}</td>
                        <td>{{ item.payStatus }}</td>
                        <!--                          <td>{{ 7 }}</td>-->
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </el-tab-pane>
              </el-tabs>

            </div>
        </div>
        </div>
      </div>
    </div>
    <br>
    <div class="container-fluid mt-5" id="copyright" align="center">
      ——————————————这里是版权——————————————<br><br>
    </div>
    <br>
  </div>
</template>

<script>
    import service from "../utils/axios";

    export default {
        name: "HallfoodOrder",
      data () {
        return {
          activeName: 'first',
          options: [{
            value: '1',
            label: '订单号'
          }, {
            value: '2',
            label: '手机号'
          }, {
            value: '3',
            label: '订单姓名'
          }, {
            value: '4',
            label: '昵称'
          }],
          value: '',
          NotReceivedOrderList:{
            list: {},
            pageNum: 1,
            orderNo: ""
          },
          ReceivedOrderList:{
            list: {},
            pageNum: 1,
            orderNo: ""
          },
          UncompletedOrderList:{
            list: {},
            pageNum: 1,
            orderNo: ""
          },
          FinishedOrderList:{
            list: {},
            pageNum: 1,
            orderNo: ""
          }
        };
      },
    filters: {
      dateFormat: function(value){

        var time = new Date(parseInt(value) * 1000)/*.toLocaleString()*//*.replace(/:\d{1,2}$/,' ')*/;
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        m = m > 9 ? m : '0' + m;
        return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;
        /*return new Date(parseInt(value) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');*/
      }
    },
      methods: {
          queryNotReceivedOrderList: function (pageNum){
              service.get("/orderInfo/queryOrderInfo",{
                params: {
                  "pageNum": pageNum,
                  "orderNo": this.NotReceivedOrderList.orderNo,
                  "orderStatus" : 1
                }
              }).then(data => {
                  this.NotReceivedOrderList.list = data.data.data.list
              })
          },
        queryReceivedOrderList: function (pageNum){
          service.get("/orderInfo/queryOrderInfo",{
            params: {
              "pageNum": pageNum,
              "orderNo": this.ReceivedOrderList.orderNo,
              "orderStatus" : 2
            }
          }).then(data => {
            this.ReceivedOrderList.list = data.data.data.list
          })
        },
        queryUncompletedOrderList: function (pageNum){
          service.get("/orderInfo/queryOrderInfo",{
            params: {
              "pageNum": pageNum,
              "orderNo": this.UncompletedOrderList.orderNo,
              "orderStatus" : 3
            }
          }).then(data => {
            this.UncompletedOrderList.list = data.data.data.list
          })
        },
        queryFinishedOrderList: function (pageNum){
          service.get("/orderInfo/queryOrderInfo",{
            params: {
              "pageNum": pageNum,
              "orderNo": this.FinishedOrderList.orderNo,
              "orderStatus" : 4
            }
          }).then(data => {
            this.FinishedOrderList.list = data.data.data.list
          })
        }
      },
      created() {
        this.queryNotReceivedOrderList(1);
        this.queryReceivedOrderList(1);
        this.queryUncompletedOrderList(1);
        this.queryFinishedOrderList(1);
      }
    }
</script>

<style scoped>

</style>
